<template>
  <div>
    <h1>Avatar</h1>

    <Demobox name="ItAvatar">
      <it-avatar
        :text="avatarText ? 'Yan Savinov' : null"
        :src="avatarImage ? husky : null"
        :square="avatarSquare"
      ></it-avatar>
      <template #props>
        <it-checkbox variant="primary" v-model="avatarSquare" label="Square" />
        <it-checkbox variant="primary" v-model="avatarImage" label="Image" />
        <it-checkbox variant="primary" v-model="avatarText" label="Text" />
      </template>
    </Demobox>

    <Box :template="typesCode" title="Type">
      <it-avatar />
      <it-avatar square />
    </Box>

    <Box :template="colorCode" title="Color">
      <it-avatar color="#3051ff" />
      <it-avatar color="#f93155" />
      <it-avatar color="#131313" />
    </Box>

    <Box id="suda" :template="imageCode" title="Image">
      <it-avatar :src="husky" />
      <it-avatar :src="husky" square />
    </Box>

    <Box :template="textCode" title="Initials">
      <it-avatar color="#3051ff" text="Yan" />
      <it-avatar color="#3051ff" text="Yan Savinov" />
    </Box>

    <Box :template="sizeCode" title="Size">
      <it-avatar />
      <it-avatar size="50px" />
      <it-avatar size="60px" />
      <it-avatar size="70px" />
    </Box>

    <Box :template="badgeCode" title="With badge">
      <it-badge value="1">
        <it-avatar :src="husky" square />
      </it-badge>
      <it-badge position="bottom-left" type="success" point>
        <it-avatar :src="husky" square />
      </it-badge>
    </Box>

    <Box :template="groupCode" title="Group">
      <it-avatar-group>
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>

      <it-avatar-group square>
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>

      <it-divider></it-divider>

      <it-avatar-group vertical>
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>

      <it-avatar-group vertical square>
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>
    </Box>

    <Box :template="groupMaxCode" title="Group with avatars limit">
      <it-avatar-group :max="3">
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>

      <it-divider></it-divider>

      <it-avatar-group :max="3" vertical>
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
        <it-avatar :src="husky" />
      </it-avatar-group>
    </Box>

    <props-table tag-name="it-avatar" :data-sheet="dataSheet" />
    <props-table tag-name="it-avatar-group" :data-sheet="dataSheetGroup" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => ({
    husky: 'https://randomuser.me/api/portraits/women/72.jpg',

    avatarSquare: false,
    avatarImage: false,
    avatarText: false,

    alertType: 'primary',
    alertTypes: ['primary', 'success', 'danger', 'warning'],

    typesCode: `<it-avatar />
<it-avatar ||| square ||| />`,

    colorCode: `<it-avatar ||| color="#3051ff" ||| />
<it-avatar ||| color="#f93155" ||| />
<it-avatar ||| color="#131313" ||| />`,

    imageCode: `<it-avatar ||| :src="husky" ||| />
<it-avatar ||| :src="husky" ||| square />`,

    textCode: `<it-avatar color="#3051ff" ||| text="Yan" ||| />
<it-avatar color="#3051ff" ||| text="Yan Savinov" ||| />`,

    sizeCode: `<it-avatar />
<it-avatar ||| size="50px" ||| />
<it-avatar ||| size="60px" ||| />
<it-avatar ||| size="70px" ||| />`,

    badgeCode: `||| <it-badge value="1"> ||| 
  <it-avatar square />
||| </it-badge> ||| 

||| <it-badge point> ||| 
  <it-avatar square />
||| </it-badge> ||| `,

    groupCode: `<it-avatar-group>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>

<it-avatar-group square>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>

<it-divider></it-divider>

<it-avatar-group vertical>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>

<it-avatar-group vertical square>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>`,

    groupMaxCode: `<it-avatar-group ||| :max="3" |||>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>

<it-divider></it-divider>

<it-avatar-group ||| :max="3" ||| vertical>
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
  <it-avatar :src="husky" />
</it-avatar-group>`,

    dataSheet: [
      {
        property: 'src',
        type: ['String'],
        default: '-',
        values: [],
        description: 'Src of avatar image',
      },
      {
        property: 'text',
        type: ['String'],
        default: '-',
        values: [],
        description: 'Avatar text',
      },
      {
        property: 'color',
        type: ['String'],
        default: '-',
        values: ['hex', 'rgb', 'hsl'],
        description: 'Avatar color',
      },
      {
        property: 'size',
        type: ['String'],
        default: '40px',
        values: [],
        description: 'Avatar size',
      },
      {
        property: 'square',
        type: ['Boolean'],
        default: 'false',
        values: [],
        description: 'Makes avatar square',
      },
    ],

    dataSheetGroup: [
      {
        property: 'vertical',
        type: ['Boolean'],
        default: 'false',
        values: [],
        description: 'Avatar size for all avatars in group',
      },
      {
        property: 'size',
        type: ['String'],
        default: '40px',
        values: [],
        description: 'Avatar size for all avatars in group',
      },
      {
        property: 'square',
        type: ['Boolean'],
        default: 'false',
        values: [],
        description: 'Makes avatars square in group',
      },
      {
        property: 'max',
        type: ['Number'],
        default: '-',
        values: [],
        description: 'Limit the maximum amount of visible avatars',
      },
    ],
  }),
})
</script>
